<template>

  <div class="login-page">
    <div class="logo-wrap">
      <img class="top-logo" src="../assets/logo-1-wihter.svg" />
    </div>
    <div class="content">
      <div class="login-content">
        <div class="in-login">
          <div class="input-item">
            <img class="icon-style" src="../assets/icons/icon-user.png" />
            <van-field clearable v-model="userName" class="input-in" placeholder="请输入会议ID" />
          </div>
          <div class="input-item input-pwd">
            <img class="icon-style" src="../assets/icons/icon-pwd.png" />
            <van-field clearable type="password" class="input-in" v-model="passwd" placeholder="请输入会议密码" />
          </div>
        </div>
        <div class="backdrop"></div>
      </div>
      <div class="check-btn">
        <div class="btn-wrap">

          <van-button type="info" :loading="loading" @click="submitCardInfo" class="btn-style login-btn">进入预约列表</van-button>
        </div>
      </div>
      <div class="ip-tip">支持IPv6访问</div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex"
import { Toast } from 'vant';
import { reftoken } from "@/utils/Common"
export default {
  name: "login",
  data() {
    return {
      userName: '',
      passwd: '',
      testField: '',
      app1: false,
      checked: false,
      loading: false,
      disabledsub: false, // 是否禁用登录
    }
  },
  computed: {
    ...mapState({
      globalData: state => state.globalData
    })
  },
  created() {
  },
  methods: {
    async gettoken() {
      let params = {
        grant_type: 'access_token', // refresh_token
        client_id: 'c2NiX3VzZXI=', // c2NiX3VzZXI=
        client_secret: '65618383e140db353d238a14a1fdb2f5',
        refresh_token: this.globalData.userToken,
      }
      const res = await this.$getAPIs(this, params, "获取token","apis", "seachToken")
      if (this.globalData.access_token) return false
      if (!res) return false;
      const {access_token, scope, token_type, expires_in} = res
      this.$store.commit("UPDATE_GLOBAL", {key: "userToken", val: token_type + " " + access_token})
    },
    validate () {
      return new Promise((resolve, reject) => {
        const { userName, passwd } = this;

        if (!userName) {
          Toast('会议ID不能为空！');
          reject(new Error('会议ID不能为空！'))
        } else if (!passwd) {
          Toast('密会议码不能为空！');
          reject(new Error('密会议码不能为空！'))
        } else {
          resolve()
        }
      })
    },

    submitCardInfo () {
      this.validate().then(async _ => {
        this.loading = true;
        this.globalData.access_token ="";
        await this.gettoken();
        const { bankCode } = this.globalData;
        const params = {
          bankCode,
          meetingNum: this.userName,
          meetingPasswd: this.passwd,
          enterFlag: "APP"
        };

        const res = await this.$getAPIs(this, params, "登录","apis", "login")
        this.loading = false;
        if (!res) return false;
        const resCon = res.content || {}


        let userToken1 = this.globalData.userToken.split(" ");

        this.$store.commit("UPDATE_GLOBAL", {key: "infor", val:  resCon.rbBusinessReserveInfo});
        this.$store.commit("UPDATE_GLOBAL", {key: "wsToken", val:  resCon.token});
        this.$store.commit("UPDATE_GLOBAL", {key: "reserveId", val:  resCon.rbBusinessReserveInfo.id});
        this.$store.commit("UPDATE_GLOBAL", {key: "meetingNum", val:  resCon.rbBusinessReserveInfo.meetingNum});
        this.$store.commit("UPDATE_GLOBAL", {key: "cifNo", val:  resCon.rbBusinessReserveInfo.meetingNum});
        this.$store.commit("UPDATE_GLOBAL", {key: "access_token", val:  userToken1[0] + " " + resCon.access_token});

        reftoken(this);
        this.$router.push('/orderList');
      }).catch(err => {
        this.loading = false;
      })
    },
  }
}
</script>

<style scoped lang="scss">
.login-page {
  width: 100%;
  height: 100%;
  position: relative;
}
.content {
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  position: absolute;
  box-sizing: border-box;
  padding: 95px 20px 0 20px;
}
.logo-wrap {
  display: flex;
  width: 100vw;
  height: 135px;
  background: #333;
  justify-content: center;
}
.top-logo {
  width: 223px;
  height: 100px;
  margin-top: -3px;
}
.login-content {
  width: 100%;
  height: 195px;
  margin: 0 auto;
  position: relative;
}
.in-login {
  height: 195px;
  background: #FFFFFF;
  border-radius: 10px;
  padding: 50px 25px 0;
  box-sizing: border-box;
  box-shadow: 0px 4px 34px 0px rgba(215,215,215,0.5);
}
.backdrop {
  left: 50%;
  bottom: -20px;
  width: 305px;
  height: 165px;
  z-index: -1;
  position: absolute;
  transform: translateX(-50%);
  background: #FFFFFF;
  border-radius: 10px;
  box-shadow: 0px 4px 34px 0px rgba(215,215,215,0.5);
}

.input-item {
  width: 100%;
  height: 40px;
  display: flex;
  align-items: center;
  border-radius: 5px;
  background: #ffffff;
  overflow: hidden;
  padding-left: 20px;
  box-sizing: border-box;
  box-shadow: 0px 4px 34px 0px rgba(215,215,215,0.5);
  .icon-style{
    height: 22px;
    width: 22px;
  }
}
.input-pwd {
  margin: 20px 0 14px 0;
}


.check-btn {
  width: 100%;
  margin-top: 75px;
}

.ip-tip {
  left: 50%;
  bottom: 20px;
  position: fixed;
  transform: translateX(-50%);
  text-align: center;
  font-size: 12px;
  color: #999;
  letter-spacing: 0;
}
</style>